<!--
 * @Description: 立项头部组件
 * @Author gong
 * @create 2024/9/4 14:46
 -->
<!--setup-->
<script setup>
import { onMounted, getCurrentInstance, computed } from 'vue'
import SvgIcon from '@/components/svg-icon/index.vue'

const { proxy } = getCurrentInstance()
const props = defineProps({
  // 头部说明
  title: {
    type: String,
    default: ''
  },
  // tab数据
  tabData: {
    type: Array,
    default: () => {
      return []
    }
  },
  // tab的值
  modelValue: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['tabClick', 'tabChange', 'update:modelValue'])

/* 状态 */

/* 方法 */
/**
 * tab点击方法
 */
const handleClick = (val) => {
  emit('tabClick', val)
}

/**
 * tab切换方法
 * @param val
 */
const handleChange = (val) => {
  emit('tabChange', val)
}

/* 计算 */
const _modelValue = computed({
  get: () => {
    return props.modelValue
  },
  set: (val) => {
    emit('update:modelValue', val)
  }
})

/* 监听 */

/* 周期 */
onMounted(() => {})

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <!-- 内容区 -->
  <div class="header_title">
    <div class="header_title_left">
      <SvgIcon
        svg="approval/start-approval"
        size="20px"
      />
      <div class="ml-4px flex items-center">
        <div
          v-tip="{ content: title, ellipsis: true }"
          class="title-text"
        >
          {{ title }}
        </div>
        <el-divider direction="vertical" />
      </div>
      <div class="left_tab">
        <el-tabs
          v-model="_modelValue"
          @tab-click="handleClick"
          @tab-change="handleChange"
        >
          <el-tab-pane
            v-for="item in tabData"
            :key="item.name"
            :label="item.label"
            :name="item.name"
          />
        </el-tabs>
      </div>
    </div>
    <div>
      <slot name="buttons" />
    </div>
  </div>
</template>

<!--style-->
<style scoped lang="less">
.header_title {
  display: flex;
  height: 64px;
  padding: 0 16px;
  //margin-bottom: 16px;
  font-weight: bold;
  line-height: 64px;
  color: #333;
  background-color: @white;
  border-radius: 6px;
  flex: none;
  justify-content: space-between;
  align-items: center;

  .header_title_left {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-text {
      max-width: 200px;
      padding-right: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .left_tab {
      display: flex;
      height: 64px;
      margin-left: 5px;
      align-items: center;

      :deep(.ijep-tabs) {
        .ijep-tabs__header {
          margin: 0;
        }

        .ijep-tabs__nav-wrap::after {
          background: none;
        }

        .ijep-tabs__item.is-top {
          height: 100%;
          padding: 0 12px;
          font-size: 16px;
          color: #666;
        }

        .ijep-tabs__item:last-child {
          padding-right: 0;
        }

        .ijep-tabs__item:nth-child(2) {
          padding-left: 0;
        }

        .ijep-tabs__item.is-top.is-active {
          color: #2d49d1;
        }
      }
    }
  }

  .ijep-button {
    font-size: 16px;
  }

  .header__title {
    font-weight: bold;
  }
}
</style>
